{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>角色列表</h5>
        </div>
        <div class="ibox-content">
            <!--搜索框开始-->
            <div class="row">
                <div class="col-sm-12">
                    <div class="col-sm-2" style="width: 100px">
                        <div class="input-group">
                            <a href="{:url('roleAdd')}">
                                <button class="btn btn-outline btn-primary" type="button">添加角色</button>
                            </a>
                        </div>
                    </div>
                    <form name="admin_list_sea" class="form-search" method="post" action="">
                        <div class="col-sm-3">
                            <div class="input-group">
                                <input type="text" id="key" class="form-control" name="key" value=""
                                       placeholder="输入需查询的角色名"/>
                                <span class="input-group-btn"> 
                                    <button type="submit" class="btn btn-primary"><i
                                            class="fa fa-search"></i> 搜索</button>
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--搜索框结束-->

            <div class="example-wrap">
                <div class="example">
                    <table class="layui-table"
                           lay-data="{id:'role',height:'full-210',url:'index',method:'post',page:true,limit:10}"
                           lay-filter="role">
                        <thead>
                        <tr>
                            <th lay-data="{field:'id',title:'ID',fixed:true,width:60,align:'center'}"></th>
                            <th lay-data="{field:'title',title:'角色名称',width:150}"></th>
                            <th lay-data="{field:'status',templet:'#status',title:'状态',width:100,align:'center'}"></th>
                            <th lay-data="{field:'create_time',title:'添加时间',width:160,align:'center'}"></th>
                            <th lay-data="{field:'update_time',title:'更新时间',width:160,align:'center'}"></th>
                            <th lay-data="{toolbar:'#action',title:'操作',width:210,align:'center',fixed:'right'}"></th>
                        </tr>
                        </thead>
                    </table>
                    <script type="text/html" id="status">
                        <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭"
                               lay-filter="status"
                               {{d.status==1?'checked':''}}>
                    </script>
                    <script type="text/html" id="action">
                        {{# if(d.id!==1){ }}
                        <div class="layui-btn-group">
                            <a href="javascript:;" onclick="giveQx({{d.id}})"
                               class="layui-btn layui-btn-info layui-btn-xs">
                                <i class="fa fa-paste"></i> 权限分配</a>&nbsp;&nbsp;
                            <a href="javascript:;" onclick="roleEdit({{d.id}})"
                               class="layui-btn layui-btn-normal layui-btn-xs">
                                <i class="fa fa-paste"></i> 编辑</a>&nbsp;&nbsp;
                            <a href="javascript:;" onclick="roleDel({{d.id}})"
                               class="layui-btn layui-btn-danger layui-btn-xs">
                                <i class="fa fa-trash-o"></i> 删除</a>
                        </div>
                        {{# } }}
                    </script>
                </div>
            </div>
            <!-- End Example Pagination -->
        </div>
    </div>
</div>
<!-- End Panel Other -->
</div>

<!-- 加载动画 -->
<div class="spiner-example">
    <div class="sk-spinner sk-spinner-three-bounce">
        <div class="sk-bounce1"></div>
        <div class="sk-bounce2"></div>
        <div class="sk-bounce3"></div>
    </div>
</div>

<!-- 角色分配 -->
<div class="zTreeDemoBackground left" style="display: none" id="role">
    <input type="hidden" id="nodeid">
    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-2">
            <ul id="treeType" class="ztree" style="padding-bottom: 0;"></ul>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-4" style="margin-bottom: 15px">
            <input type="button" value="" class="" style="border: none;" id="postform"/>
        </div>
    </div>
</div>


{include file="public/footer" /}
<link rel="stylesheet" href="__JS__/plugins/zTree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="__JS__/plugins/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="__JS__/plugins/zTree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="__JS__/plugins/zTree/jquery.ztree.exedit-3.5.js"></script>

<script type="text/javascript">

    $(".spiner-example").css('display', 'none'); //数据加载完关闭动画

    //编辑角色
    function roleEdit(id) {
        location.href = './roleEdit/id/' + id + '.html';
    }

    //删除角色
    function roleDel(id) {
        lunhui.confirm(id, '{:url("roleDel")}');
    }

    //
    function role_state(id) {
        lunhui.status(id, '{:url("role_state")}');
    }

    var form = layui.form;
    /**
     * 角色状态
     */
    form.on('switch(status)', function (obj) {
        $.post("{:url('role_state')}", {id: this.value}, function (result) {
            //layer.tips(result.msg, obj.othis, {tips: 4});
        });
    });
    zNodes = '';
    var index = '';
    var index2 = '';

    //分配权限
    function giveQx(id) {
        $("#nodeid").val(id);
        //加载层
        index2 = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
        //获取权限信息
        $.getJSON('./giveAccess', {'type': 'get', 'id': id}, function (res) {
            layer.close(index2);
            if (res.code == 1) {
                zNodes = JSON.parse(res.data);  //将字符串转换成obj

                //页面层
                index = layer.open({
                    type: 1,
                    area: ['350px', '80%'],
                    title: '权限分配',
                    skin: 'layui-layer-demo', //加上边框
                    content: $('#role'),
                    btn: ['确认分配', '取消'],
                    btnAlign: 'c',
                    yes: function () {
                        $('#postform').click();
                    },
                    end: function () {
                        $('#role').hide();
                    }
                });

                //设置zetree
                var setting = {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };

                $.fn.zTree.init($("#treeType"), setting, zNodes);
                var zTree = $.fn.zTree.getZTreeObj("treeType");
                zTree.expandAll(true);

            } else {
                layer.alert(res.msg);
            }

        });
    }

    //确认分配权限
    $("#postform").click(function () {
        var zTree = $.fn.zTree.getZTreeObj("treeType");
        var nodes = zTree.getCheckedNodes(true);
        var NodeString = '';
        $.each(nodes, function (n, value) {
            if (n > 0) {
                NodeString += ',';
            }
            NodeString += value.id;
        });
        var id = $("#nodeid").val();
        //写入库
        $.post('./giveAccess', {'type': 'give', 'id': id, 'rule': NodeString}, function (res) {
            layer.close(index);
            if (res.code == 1) {
                layer.msg(res.msg, {icon: 1, time: 1500, shade: 0.1}, function () {
                });
            } else {
                layer.msg(res.msg);
            }

        }, 'json')
    })
</script>
</body>
</html>








